<template>
	<div class="contact-us-container">
		<h1 class="contact-us-title">联系我们</h1>
		<div class="contact-info">
			<h2 class="info-title">联系方式</h2>
			<p><span class="label">电话：</span>123-456-7890</p>
			<p><span class="label">邮箱：</span>info@example.com</p>
			<p><span class="label">在线客服：</span><a href="#" class="客服链接">点击咨询</a></p> <!-- 新增在线客服链接 -->
		</div>
		<div class="contact-info">
			<h2 class="info-title">公司地址</h2>
			<p>123 Main Street, City, Country</p>
		</div>
		<div class="contact-info">
			<h2 class="info-title">社交媒体</h2>
			<p><span class="label">微博：</span><a href="https://weibo.com/" class="微博链接">https://weibo.com/</a></p>
			<p><span class="label">抖音：</span><a href="https://www.douyin.com/" class="抖音链接">https://www.douyin.com/</a></p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ContactUs',
		data() {
			return {
			};
		}
	};
</script>

<style scoped>
	.contact-us-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		background-color: #fff;
		font-family: Arial, sans-serif;
		line-height: 1.6;
	}

	.contact-us-title {
		font-size: 32px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	}

	.contact-info {
		margin-bottom: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		padding: 15px;
		background-color: #f9f9f9;
	}

	.info-title {
		font-size: 24px;
		color: #333;
		margin-bottom: 10px;
		border-bottom: 2px solid #007bff;
		padding-bottom: 5px;
	}

	.label {
		font-weight: bold;
		margin-right: 5px;
	}

	.map-container {
		width: 100%;
		height: 300px;
		margin-top: 10px;
		position: relative;
	}

	.map-tip {
		position: absolute;
		bottom: 10px;
		left: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 5px 10px;
		border-radius: 3px;
		font-size: 14px;
		z-index: 1;
	}

	.social-links-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.social-link {
		display: inline-flex;
		align-items: center;
		margin: 0 15px 10px 0;
		text-decoration: none;
		color: #333;
		transition: color 0.3s ease;
	}

	.social-link:hover {
		color: #007bff;
	}
</style>